<template>
  <el-tooltip v-bind="_column.showTootipAttrs">
    <template #content>
      <div :style="{ ...customStyle() }">
        {{ getVal(row, _column.key) }}
      </div>
    </template>
    <div
      class="toop_tip"
      :style="customStyle()"
      @click="
        () =>
          typeof _column?.showToopCustomAttrs?.onToolClick === 'function'
            ? _column?.showToopCustomAttrs?.onToolClick(props.row)
            : () => {}
      "
    >
      {{ getVal(row, _column.key) }}
    </div>
  </el-tooltip>
</template>

<script setup lang="ts">
import { getVal } from '@/utils'

const props = defineProps({
  _column: {
    type: Object,
    default: () => {}
  },
  row: {
    type: Object,
    default: () => {}
  }
})

const customStyle = () => {
  return {
    ...(props._column?.showToopCustomAttrs || {})
  }
}
defineOptions({
  name: 'ToopTip'
})
</script>

<style scoped lang="scss">
.toop_tip {
  width: 100%;
  overflow: hidden;
  /*超出部分隐藏*/
  white-space: nowrap;
  /*禁止换行*/
  text-overflow: ellipsis;
  &:hover {
    cursor: pointer;
  }
}
</style>
